import {PageContainer} from "@ant-design/pro-components";
import React, {useEffect, useState} from "react";
import {getUserInfoUsingPost, updateUserInfoUsingPost} from "@/services/xs-Ai-user/userController";
import {
  Button,
  Form,
  Input,
  message,
  Radio, Upload
} from "antd";
import {PlusOutlined} from "@ant-design/icons";
import {uploadUsingPost} from "@/services/xs-Ai-user/commonConfig";

const BaseInfo: React.FC = () => {


  const [form] = Form.useForm();

  const [userInfo, setUserInfo] = useState<API.UserVO>()

  const [isUpdate, setIsUpdate] = useState<boolean>(false)

  const [fileList, setFileList] = useState<any[]>([])

  const [newHeader, setNewHeader] = useState<string>('')

  const fetchUserInfo = async () => {
    const res = await getUserInfoUsingPost();
    if (res.data) {
      await setUserInfo(res.data)
      await setFileList([{
        url: res.data.header,
      }])
      form.setFieldsValue({
        ...res.data
      })
      return;
    }
    message.error("获取用户信息失败--" + res.message)
  }

  useEffect(() => {
    fetchUserInfo();
  }, [])

  return (
    <PageContainer title={'个人信息'} style={{
      width: `70%`,
      margin: '0 auto',
      border: '1px solid #e8e8e8',
    }}>
      <>
        <Form
          labelCol={{span: 4}}
          wrapperCol={{span: 14}}
          layout="horizontal"
          form={form}
          onFinish={async (data) => {
            setIsUpdate(false)
            if (userInfo?.header !== data.header.toString()) {
              delete data.header
            }
            let newData = data;
            if (newHeader !== '') {
              newData = {
                ...data,
                header: newHeader
              }
            }
            const updateRes = await updateUserInfoUsingPost(newData);
            if (updateRes.data) {
              message.success("更新成功")
              await fetchUserInfo()
              return;
            }
            message.error("更新个人信息失败--" + updateRes.message)
          }}
          disabled={!isUpdate}
        >
          <Form.Item label="头像" valuePropName="header" name={"header"}>
            <Upload onChange={(fileList) => {
              setFileList(fileList.fileList)
            }} disabled={!isUpdate} listType="picture-card" maxCount={1} fileList={fileList}
                    customRequest={async (file) => {
                      const uploadRes = await uploadUsingPost(file);
                      if (uploadRes.data) {
                        message.success("头像上传成功")
                        await setNewHeader(uploadRes.data)
                        await setFileList([{
                          url: uploadRes.data,
                        }])
                        return;
                      }
                      message.error("头像上传失败--" + uploadRes.message)
                    }}>
              <div>
                <PlusOutlined/>
                <div style={{marginTop: 8}}>Upload</div>
              </div>
            </Upload>
          </Form.Item>
          <Form.Item label="用户名" name={"username"}>
            <Input disabled={true}/>
          </Form.Item>
          <Form.Item label="昵称" name={"nickname"}>
            <Input/>
          </Form.Item>
          <Form.Item label="电话" name={"mobile"}>
            <Input disabled={true}/>
          </Form.Item>
          <Form.Item label="邮箱" name={"email"}>
            <Input disabled={true}/>
          </Form.Item>
          <Form.Item label="性别" name={"gender"}>
            <Radio.Group>
              <Radio value={0}> 男 </Radio>
              <Radio value={1}> 女 </Radio>
              <Radio value={2}> 不愿透露 </Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="API-KEY" name={"apiKey"}>
            <Input disabled={true}/>
          </Form.Item>
          <Form.Item label="API-SECRET" name={"apiSecret"}>
            <Input disabled={true}/>
          </Form.Item>
          <Form.Item label="剩余Token" name={"residueToken"}>
            <Input disabled/>
          </Form.Item>
          <Form.Item label="用户类别" name={"level"}>
            <Radio.Group disabled={true}>
              <Radio value={0}> 管理员 </Radio>
              <Radio value={1}> 普通用户 </Radio>
              <Radio value={2}> VIP用户 </Radio>
            </Radio.Group>
          </Form.Item>
          <div style={{display: 'flex', justifyContent: 'center'}}>
            <Button type={"primary"} disabled={isUpdate} onClick={() => {
              setIsUpdate(true)
            }}
                    style={{
                      marginRight: '10%'
                    }}>
              编辑
            </Button>
            <Form.Item>
              <Button type={"primary"} disabled={!isUpdate}
                      htmlType={"submit"}>
                提交
              </Button>
            </Form.Item>
          </div>
        </Form>
      </>
    </PageContainer>
  );
};

export default BaseInfo;
